<template>
    <div class="container wow animate__animated animate__fadeInUp" data-wow-duration="2s" data-wow-delay="0.1s">
        <h3 class="title">产品中心</h3>
        <!-- 产品图片区域  START -->
        <el-row class="row" justify="space-evenly">
            <el-col :span="7.1" v-for="p in productShow" :key="p.id">
                <div class="content" @click="goProduct">
                    <img :src="p.imgUrl" :alt="p.id">
                    <h3>{{ p.name }}</h3>
                </div>
            </el-col>
        </el-row>
        <!-- 产品图片区域  END -->
        <router-link class="more" to="/product">了解更多</router-link>
    </div>
</template>

<script setup lang="ts">
    import useHomeStore from "@/store/modules/home.ts"  //引入home仓库
    import { onMounted, nextTick, ref } from "vue";
    import { useRouter } from 'vue-router'
    import WOW from 'wow.js' // 在vue3中下载的是wow.js|vue2中是wowjs

    const homeStore = useHomeStore();
    const router = useRouter()
    let productShow = ref < any > ([])
    onMounted(() => {
        //初始化wow.js(页面滚动加载动画)
        nextTick(() => {   //页面渲染完，在执行
            let wow = new WOW({
                live: false
            })
            wow.init()
        })
        getProductShowList()

    });

    //通知vuex发送请求获取产品中心的数据
    const getProductShowList = async () => {
        await homeStore.getProductShow();
        productShow.value = homeStore.productShow
    }
    //跳转到产品中心页面
    const goProduct = () => {
        router.push('/product')
    }
</script>

<style scoped lang="scss">
    .container {
        margin-top: 80px;
        font-family: "Source Han Sans CN";

        .title {
            font-size: 30px;
            font-weight: 500;
            text-align: center;
            color: #4F68AC;
            margin-bottom: 30px;
        }

        .row {
            padding-top: 40px;

            .content {
                border: 1px solid #ffffff;
                overflow: hidden;
                border-top: 3px solid #4F68AC;
                border-radius: 0px;
                background-color: #f8f8f8;
                padding: 0 12px;
                cursor: pointer;
                margin-bottom: 40px;

                img {
                    width: 320px;
                    transition: transform 0.8s;

                }

                &:hover img {
                    transform: scale(1.15);
                }

                h3 {
                    text-align: center;
                    font-size: 20px;
                    color: #4F68AC;
                    margin: 40px 0px 30px;
                }
            }
        }

        .more {
            height: 40px;
            line-height: 40px;
            width: 140px;
            text-align: center;
            display: block;
            margin: 30px auto 0px;
            border: 1px solid #999;
            background-color: #fff;
            font-size: 14px;
            color: #999;
            transition-duration: 0.3s;

            &:hover {
                text-decoration: none;
                background-color: #4F68AC;
                border: 1px solid #4F68AC;
                color: #fff;
            }

            &:active {
                transform: scale(0.95);
            }
        }
    }
</style>